

<script>
import getImageUrl from '@/utils/getImageUrl.js'
import { useUserStore } from '@/store/user.js'
import FileUpload from '@/components/FileUpload.vue'

export default {
    name: "userDetailInfo",
    components: {
        FileUpload
    },
    data() {
        return {
            getImageUrl: getImageUrl,
            form: {
                id: '1',
                userName: '',
                userProfile: '',
                userAvatar: '',
                nickName: '',
                userEmail: '',
                userCredit: '',
                createTime: '',
                userSex: ''
            },
            isDisabled: true,
            imageUrl: '',
        }
    },
    mounted() {
        this.form = useUserStore().currentUser
        this.imageUrl = this.form.userAvatar
        console.log(this.imageUrl)
    },
    methods: {
        onEdit() {
            this.isDisabled = !this.isDisabled
        },
        onSubmit() {
            this.isDisabled = !this.isDisabled
            this.$http({
                method: 'post',
                url: '/user/update',
                data: this.form
            }).then(res => res.data)
                .then(res => {
                    console.log("修改具体信息", res)
                    if (res.code === 0) {
                        this.$message.success('修改成功')

                    }
                })
        },
        imageUrlChanged(imageUrl) {
            this.imageUrl = imageUrl
            this.form.userAvatar = imageUrl
        }
    }
}
</script>


<template>
    <div>
        <el-card id="user-center">
            <template #header>
                <div style="text-align: center;">
                    <h2>我的信息</h2>
                </div>
            </template>
            <el-form :model="form" label-width="120px" :disabled="isDisabled">

                <el-form-item label="头像：">
                    <FileUpload action="file/upload" :imageUrl="imageUrl" @imageUrlChanged="imageUrlChanged" />
                </el-form-item>

                <el-form-item label="账号：">
                    <el-text>{{ form.userName }}</el-text>
                </el-form-item>
                <el-form-item label="注册时间：">
                    <el-text>{{ form.createTime }}</el-text>
                </el-form-item>
                <el-form-item label="昵称：">
                    <el-input v-model="form.nickName" />
                </el-form-item>
                <el-form-item label="身份证：">
                    <el-input v-model="form.userCredit" />
                </el-form-item>

                <el-form-item label="性别：">
                    <el-radio-group v-model="form.userSex">
                        <el-radio label="男" value="男" />
                        <el-radio label="女" value="女" />
                        <el-radio label="保密" value="保密" />
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="邮箱：">
                    <el-input v-model="form.userEmail" />
                </el-form-item>

                <el-form-item label="简介：">
                    <el-input v-model="form.userProfile" type="textarea" :rows="3" />
                </el-form-item>

            </el-form>
            <template #footer>
                <div style="display: flex; justify-content: center;">
                    <el-button v-if="!isDisabled" type="primary" @click="onSubmit" size="large"
                        style="width: 100px">保存</el-button>
                    <el-button v-else type="primary" @click="onEdit" size="large" style="width: 100px">编辑</el-button>
                </div>
            </template>
        </el-card>
    </div>
</template>


<style scoped>
#user-center {
    width: 550px;
    margin: 0 auto;
    margin-bottom: 100px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>


